Streaming Flash Video
This tutorial describes how to stream video from your own web site using Adobe Flash and Adobe Dreamweaver. Video basics, like how to shoot and edit your video are beyond the scope if this tutorial. It is assumes that you have already done these things.
Converting your video to .flv format
-
First things first, we need a video source file in .avi (windows typical) or .mov (mac typical). With Flip4Mac, we can also convert .wmv source files. Note: .mp4 files work as well; .mpg files did not work in my testing.
-
Open Adobe Flash CS3 Video Encoder: Finder => Applications => Adobe Flash CS3 Video Encoder (folder) => Adobe Flash CS3 Video Encoder.
-
Click "Add" and browse for your source video. Select that video and click "Open".
-
In most cases, the default settings are fine. In some cases you may wish to increase the audio Data rate (a high quality audio recording might sound better in 192kbps stereo or resize the video. Resizing in particular can greatly reduce file size. Note that file size can be an issue for web sites both because it can slow the viewing experience (bandwidth) and because it takes up disk space which is often limited on web servers.
-
Once you've adjusted your settings, simply "Start Queue" and wait for it to finish. The result will be a .flv file with the same name as your original (if the Flash Video Encoder detects a file with this name already, it will append a 1, 2, 3 etc. to the new file).
Inserting your video into a web page
-
Copy the .flv file from above to a folder in your local web site files (I use "video")
-
Choose the page (probably .php) in which you'd like the video to appear; edit this page.
-
From the "Common" set of options in the Insert Toolbar, choose "Flash Video"
-
Browse for your video (inside the video folder) and select your options. Here, I've chosen a more advanced "skin" and auto-detected its size at 640x480. If you wish, you can also choose to have it play automatically (usually not a good default option). Note that I have unchecked "prompt users to download flash if necessary" as this just inserts extra code in your page and is highly unnecessary as almost all users will already have flash.
-
Next, save your file. It will automatically put some new files in your directory - the Scripts folder, and at the root (the .swf files).
-
The next step is a matter of preference - since I like to keep all my .swf files in one place, I copy them to a "flash" folder (create it if it doesn't exist). I then drag both .swf files into the "flash" folder and when prompted, tell it to Update affected files. This is important as it gets the file paths correct.
-
Your File layout should now look like this
-
Finally, you can upload all of your content and test the video: